<template>
  <div class="table2">
    <GiTable
      row-key="menuId"
      id="bottomMenu"
      hide-expand-button-on-empty
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="false"
      @sorter-change="onSorterChange"
      @refresh="getTableData"
    >
      <template #custom-extra>
        <a-button type="primary" size="small" @click="onAddOrEdit(false)">
          <template #icon><icon-plus /></template>
          <span>新增一级菜单</span>
        </a-button>
        <a-button type="primary" size="small" :loading="synchronousLoading" @click="synchronous">
          <template #icon><icon-sync /></template>
          <span>同步菜单</span>
        </a-button>
      </template>
      <template #action="{ record }">
        <a-button type="text" size="small" @click="onAddOrEdit(record)"> 编辑 </a-button>
        <a-button type="text" size="small" @click="onAddOrEdit(record, true)" v-if="record.pId == 0">
          增加子菜单
        </a-button>
        <a-button type="text" size="small" @click="onDeleteItem(record.menuId)"> 删除 </a-button>
      </template>
    </GiTable>
    <Edit ref="EditRef" @getTableData="getTableData" />
  </div>
</template>
<script setup>
import { wechatMenuAll, wechatMenuDelete, wechatMenuSetWechat } from '@/apis'
import { Message, Modal } from '@arco-design/web-vue'
import Edit from './Edit.vue'

defineOptions({ name: 'bottomMenu' })

const EditRef = ref()
const tableData = ref([])
const loading = ref(false)
const synchronousLoading = ref(false)

const columns = ref([
  {
    title: '菜单名称',
    width: 120,
    dataIndex: 'name'
  },
  {
    title: '类型',
    width: 100,
    render: (data) => {
      const text = data.record.type
      return text == 'click'
        ? '点击'
        : text == 'view'
        ? '网页'
        : text == 'miniprogram'
        ? '小程序'
        : text == 'empty'
        ? '打开二级菜单'
        : '--'
    }
  },
  {
    title: '点击事件标识',
    width: 120,
    render: (data) => {
      return data.record.eventKey || '--'
    }
  },
  {
    title: '操作',
    width: 150,
    slotName: 'action',
    align: 'center',
    fixed: 'right'
  }
])
const getTableData = async () => {
  try {
    loading.value = true
    const res = await wechatMenuAll()
    tableData.value = res.data.map((item) => {
      return { ...item, children: item.subButton }
    })
  } finally {
    loading.value = false
  }
}
getTableData()

const onAddOrEdit = (item, child = false) => {
  if (child) {
    item = { pId: item.menuId }
  } else if (item) {
    item['pId'] = 0
  }
  EditRef.value?.addOrEdit(item)
}

// 同步菜单
const synchronous = async () => {
  try {
    synchronousLoading.value = true
    await wechatMenuSetWechat()
    Message.success('操作成功')
  } finally {
    synchronousLoading.value = false
  }
}

// 删除单条数据
const onDeleteItem = async (menuId) => {
  Modal.warning({
    title: '警告',
    content: '是否确认删除',
    hideCancel: false,
    onBeforeOk: async () => {
      await wechatMenuDelete({ menuId })
      Message.success('操作成功')
      getTableData()
      return true
    }
  })
}
</script>
<style lang="scss" scoped>
:deep(.arco-radio-group .arco-radio) {
  margin-right: 10px;
}
.table2 {
  height: 100%;
  overflow: hidden;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
</style>
